<!-- 设备状态趋势图 -->
<template>
  <div id="device-status-chart"></div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue';
//  按需引入 echarts
import * as echarts from 'echarts';
import { getFacilityAttrTendencyChart } from '@/api/yz/facility-summary/index'

const props = defineProps({
  facilityId: {
    type: Number,
    default: null,
  },
});

watch(() => props.facilityId, 
() =>{
  loadData()
})

// 选中的时间类型 本周本月自定义
const radioType = ref('MONTH');

// 数据加载
const loadData = async () => {
  await loadFacilityAttrTendencyChart()
  // 重新渲染图表
  init();
};

provide('echarts', echarts);

onMounted(() => {
  setTimeout(init, 1000);
});

const init = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('device-status-chart'));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
    {
      name: '设备状态',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['70%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '在线' },
        { value: 735, name: '离线' },
        { value: 580, name: '异常' },
      ]
    }
  ]
  });
};
</script>

<style scoped lang="scss">
#device-status-chart {
  width: 100%;
  height: 140px;
}
</style>
